<template>
  <div class="banner">
      <el-carousel trigger="click" height="506px">
      <el-carousel-item :key="key" v-for="banner ,key in banner_list">
<!--        #方法一<a :href="banner.link"><img :src="$settings.Host+banner.image_url"></a>-->
        <a :href="banner.link"><img :src="banner.image" alt=""></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


<script>
    export default {
        name: "Banner",
        data(){
            return{
                banner_list:[]

            }
        },
        created(){
            this.get_banner_list();
        },
        methods:{
       get_banner_list(){
                // 获取轮播图接口数据
                this.$axios.get(`${this.$settings.Host}/banner/`).then(response=>{
                    console.log(response.data);
                    this.banner_list = response.data;
                })
            }
        }
    }
</script>

<style>
  img {
    width: 103%;
  }

  .el-carousel__arrow {
    height: 50px;
    width: 49px;
  }

  [class*=" el-icon-"], [class^=el-icon-] {
    line-height: 2;

  }

  .el-carousel__arrow {
    font-size: 21px;
  }
  .el-carousel__indicators--horizontal{
    bottom: 48px;
    left: 47%;
  }
</style>
